import React, { useState, useEffect, Suspense } from 'react';
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined
} from '@ant-design/icons';
import { createRoutesByRequire } from '../../hook/routerHook'
import { Layout, Menu, Button, theme } from 'antd';
import { useNavigate,Outlet } from 'react-router-dom'
import Loading from '../../component/Loading';
import { getStorage } from '../../store';
import { getMenu } from '../../api/system/router';
const { Header, Sider, Content } = Layout;

const Admin = () => {

  const [collapsed, setCollapsed] = useState(false);
  const [router, setRouter] = useState([])
  const navigate = useNavigate()
  if(!getStorage('token')){
    navigate('/login')
  }
 
  const onClick = (e) => {
    navigate('/admin/' + e.key)
  }
  useEffect(() => {
    getMenu().then(res=>{
      if(res.data.code === 200){
        let treeList = res.data.data
        setRouter(createRoutesByRequire([...treeList]))
      }
    })
  }, [])
  const {
    token: { colorBgContainer },
  } = theme.useToken();
  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider trigger={null} collapsible collapsed={collapsed}>
        <div className="demo-logo-vertical" />
        <Menu
          theme="dark"
          mode="inline"
          defaultSelectedKeys={['1']}
          items={router}
          onClick={onClick}
        />
      </Sider>
      <Layout>
        <Header
          style={{
            padding: 0,
            background: colorBgContainer,
          }}
        >
          <Button
            type="text"
            icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
            onClick={() => setCollapsed(!collapsed)}
            style={{
              fontSize: '16px',
              width: 64,
              height: 64,
            }}
          />
        </Header>
        <Content
          style={{
            margin: '24px 16px',
            padding: 24,
            minHeight: 280,
            background: colorBgContainer,
          }}
        >
          <Suspense fallback={<Loading/>}>
            <Outlet/>
          </Suspense>
        </Content>
      </Layout>
    </Layout>
  );
};
export default Admin;